<template>
  <div class="createRules no_copy">
    <el-drawer size="70%" class="drawerBox" :modal="false" :visible.sync="rulesBool">
      <div class="title" slot="title">{{activeItem.id?'查看':'创建'}}用户分群</div>
      <div class="cont">
        <div class="sectionRules">
          <el-steps class="step" :align-center="true" :active="step">
            <el-step title="基础信息"></el-step>
            <el-step title="分群规则"></el-step>
          </el-steps>
          <template v-if="step==1">
            <el-form
              size="medium"
              ref="form"
              class="basicInformation"
              label-position="left"
              label-width="100px"
              :disabled="disabledJudge"
            >
              <el-form-item label="分群显示名">
                <el-input v-model="activeItem.cname"></el-input>
              </el-form-item>
              <el-form-item label="分群名称">
                <el-input placeholder="请输入内容" :disabled="true" v-model="activeItem.name">
                  <template slot="prepend">user_group_</template>
                </el-input>
              </el-form-item>
              <el-form-item  label="更新方式">
                <el-radio :disabled="disabledType?disabledType:disabledJudge" v-model="activeItem.isRoutine" :label="1" border>例行</el-radio>
                <el-radio :disabled="disabledType?disabledType:disabledJudge" v-model="activeItem.isRoutine" :label="0" border>手动</el-radio>
              </el-form-item>
              <el-form-item v-if="activeItem.isRoutine==1">
                按
                <el-select
                  :disabled="disabledType?disabledType:disabledJudge"
                  v-model="activeItem.unit"
                  class="numberSelect"
                  size="mini"
                  placeholder="请选择"
                >
                  <el-option label="天" value="day"></el-option>
                  <el-option label="周" value="week"></el-option>
                  <el-option label="月" value="month"></el-option>
                </el-select>计算
              </el-form-item>
              <el-form-item label="推送设置">
                <el-select no-data-text="暂无配置项"></el-select>
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="activeItem.comment" :rows="6" type="textarea"></el-input>
              </el-form-item>
            </el-form>
          </template>
          <template v-if="step==2">
            <!-- 用户属性 用户行为 行为序列 -->
            <div class="relationBox">
              <div class="relationLeft">
                <span class="relationLine"></span>
                <span
                  v-if="!disabledJudge"
                  @click="activeItem.ruleContentList[0].relation = activeItem.ruleContentList[0].relation=='and'?'or':'and'"
                  class="relationBtn no_copy"
                >{{relationShowChange(activeItem.ruleContentList[0].relation)}}</span>
                <span
                  class="relationBtn no_copy relationBtnNoHover"
                  v-else
                >{{relationShowChange(activeItem.ruleContentList[0].relation)}}</span>
              </div>
              <div class="relationRight">
                <!-- 用户属性 -->
                <div class="propTypeList">
                  <header class="flex_btw">
                    <div>
                      <i
                        v-if="foldArr[0]"
                        @click="foldArr = [false,foldArr[1],foldArr[2]]"
                        class="el-icon-minus"
                      ></i>
                      <i
                        v-else
                        @click="foldArr = [true,foldArr[1],foldArr[2]]"
                        class="el-icon-plus"
                      ></i>
                      用户属性
                    </div>
                    <div v-if="!disabledJudge" @click="ruleContentListAdd(0)">
                      <i class="el-icon-circle-plus"></i>添加
                    </div>
                  </header>
                  <section :style="{height:foldArr[0]?'auto':'0'}">
                    <div class="relationBox">
                      <div class="relationLeft">
                        <span class="relationLine"></span>
                        <span
                          v-if="activeItem.ruleContentList[0].userPropertyRule.conditions.length>1&&!disabledJudge"
                          class="relationBtn no_copy"
                          @click="activeItem.ruleContentList[0].userPropertyRule.relation = activeItem.ruleContentList[0].userPropertyRule.relation=='and'?'or':'and'"
                        >{{relationShowChange(activeItem.ruleContentList[0].userPropertyRule.relation)}}</span>
                        <span
                          v-if="activeItem.ruleContentList[0].userPropertyRule.conditions.length>1&&disabledJudge"
                          class="relationBtn no_copy relationBtnNoHover"
                        >{{relationShowChange(activeItem.ruleContentList[0].userPropertyRule.relation)}}</span>
                      </div>
                      <div class="relationRight">
                        <div
                          v-for="(_i,_in) in activeItem.ruleContentList[0].userPropertyRule.conditions"
                          :key="_in"
                        >
                          <template v-if="_i.relation">
                            <div class="relationBox behaviorBox">
                              <div class="relationLeft">
                                <span class="relationLine"></span>
                                <span
                                  v-if="!disabledJudge"
                                  @click="_i.relation = _i.relation=='and'?'or':'and'"
                                  class="relationBtn"
                                >{{relationShowChange(_i.relation)}}</span>
                                <span
                                  v-else
                                  class="relationBtn relationBtnNoHover"
                                >{{relationShowChange(_i.relation)}}</span>
                              </div>
                              <div class="relationRight">
                                <div v-for="(_is,_ins) in _i.conditions" :key="_ins">
                                  <div class="relationItem">
                                    <conditionsItem
                                      fieldType='userPropertyList'
                                      @change="userPropSet($event,_in,_ins,true)"
                                      :fieldList="fieldList.userPropertyList"
                                      :disabled="disabledJudge"
                                      :item="_is"
                                    ></conditionsItem>
                                    <span class="powerList">
                                      <i
                                        v-if="!disabledJudge"
                                        @click="userPropOperation(-1,_in,_ins)"
                                        class="el-icon-close del"
                                        :style="{marginRight:'10px'}"
                                      ></i>
                                      <span
                                        v-if="_ins == _i.conditions.length-1 && !disabledJudge"
                                        @click="userPropOperation(1,_in,_ins)"
                                      >
                                        <i class="el-icon-circle-plus"></i>新增
                                      </span>
                                    </span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </template>
                          <template v-else>
                            <div class="relationItem">
                              <conditionsItem
                                fieldType='userPropertyList'
                                @change="userPropSet($event,_in,null,false)"
                                :fieldList="fieldList.userPropertyList"
                                :disabled="disabledJudge"
                                :item="_i"
                              ></conditionsItem>
                              <span class="powerList">
                                <span v-if="!disabledJudge" @click="userPropOperation(2,_in)">
                                  <i class="el-icon-circle-plus"></i>新增
                                </span>
                                <i
                                  v-if="!disabledJudge"
                                  @click="userPropOperation(-2,_in)"
                                  class="el-icon-close del"
                                ></i>
                              </span>
                            </div>
                          </template>
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
                <!-- 用户行为 -->
                <div class="propTypeList">
                  <header class="flex_btw">
                    <div>
                      <i
                        v-if="foldArr[1]"
                        @click="foldArr = [foldArr[0],false,foldArr[2]]"
                        class="el-icon-minus"
                      ></i>
                      <i
                        v-else
                        @click="foldArr = [foldArr[0],true,foldArr[2]]"
                        class="el-icon-plus"
                      ></i>
                      用户行为
                    </div>
                    <div v-if="!disabledJudge" @click="ruleContentListAdd(1)">
                      <i class="el-icon-circle-plus"></i>添加
                    </div>
                  </header>
                  <section :style="{height:foldArr[1]?'auto':'0'}">
                    <div class="relationBox">
                      <div class="relationLeft">
                        <span class="relationLine"></span>
                        <span
                          v-if="activeItem.ruleContentList[0].userBehaviorRule.behaviors.length>1&&!disabledJudge"
                          class="relationBtn no_copy"
                          @click="activeItem.ruleContentList[0].userBehaviorRule.relation = activeItem.ruleContentList[0].userBehaviorRule.relation=='and'?'or':'and'"
                        >{{relationShowChange(activeItem.ruleContentList[0].userBehaviorRule.relation)}}</span>
                        <span
                          v-if="activeItem.ruleContentList[0].userBehaviorRule.behaviors.length>1&&disabledJudge"
                          class="relationBtn no_copy relationBtnNoHover"
                        >{{relationShowChange(activeItem.ruleContentList[0].userBehaviorRule.relation)}}</span>
                      </div>
                      <div class="relationRight">
                        <div
                          v-for="(_i,_in) in activeItem.ruleContentList[0].userBehaviorRule.behaviors"
                          :key="_in"
                        >
                          <div class="relationBox behaviorBox">
                            <div v-if="_i.measures.length>1" class="relationLeft">
                              <span class="relationLine"></span>
                              <span
                                class="relationBtn no_copy"
                                v-if="!disabledJudge"
                                @click="_i.relation = _i.relation=='and'?'or':'and'"
                              >{{relationShowChange(_i.relation)}}</span>
                              <span
                                class="relationBtn no_copy relationBtnNoHover"
                                v-else
                              >{{relationShowChange(_i.relation)}}</span>
                            </div>
                            <div
                              class="relationRight"
                              :style="{
                                    marginLeft:_i.measures.length>1?'1rem':'0',
                                    width:_i.measures.length>1?'calc(100% - 1rem)':'100%'
                                  }"
                            >
                              <div
                                class="relationItem relationItemBehavior"
                                v-for="(_is,_ins) in _i.measures"
                                :key="_ins"
                              >
                                <header>
                                  <span class="indexNum">{{convert(_ins+1)}}{{_in+1}}</span>
                                  <el-date-picker
                                    :disabled="disabledJudge"
                                    class="el_lang"
                                    :picker-options="pickerOptions"
                                    :style="{width:'3.6rem'}"
                                    :size="relationSize"
                                    v-model="_is.timeRestrict.params"
                                    type="daterange"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="yyyy-MM-dd"
                                  ></el-date-picker>
                                  <!-- 做过 没做过  后端 没有该字段 -->
                                  <el-select
                                    :style="{width:'1.4rem'}"
                                    @change="_is.restrict=(!_is.doNot)?_is.restrict:{function:'equal',params:[0]}"
                                    class="el_min"
                                    v-model="_is.doNot"
                                    :disabled="disabledJudge"
                                    :size="relationSize"
                                  >
                                    <el-option label="做过" :value="false"></el-option>
                                    <el-option label="没做过" :value="true"></el-option>
                                  </el-select>
                                  <el-select
                                    class="el_mid"
                                    filterable
                                    @change="
                                    _is.filter.conditions = [];
                                    _is.fieldList=[];
                                    fieldListChange('userBehaviorRule',_in,_ins,_is.eventId)"
                                    v-model="_is.eventId"
                                    :disabled="disabledJudge"
                                    :size="relationSize"
                                  >
                                    <el-option
                                      v-for="itemEvent in eventList"
                                      :key="itemEvent.eventId"
                                      :label="itemEvent.eventName"
                                      :value="itemEvent.eventId"
                                    ></el-option>
                                  </el-select>
                                  <span
                                    class="powerList"
                                    v-if="!disabledJudge"
                                    @click="_is.eventId?userBehaviorOperation(3,_in,_ins):null"
                                    :style="{marginRight:'20px'}"
                                  >
                                    <i class="el-icon-plus"></i>添加筛选
                                  </span>
                                  <span class="powerList">
                                    <span
                                      class="addChoose"
                                      v-if="!disabledJudge"
                                      @click="userBehaviorOperation(-1,_in,_ins)"
                                    >
                                      <i class="el-icon-error del"></i>删除
                                    </span>
                                    <span
                                      class="addChoose"
                                      v-if="_ins == _i.measures.length-1 && !disabledJudge"
                                      @click="userBehaviorOperation(1,_in,_ins)"
                                    >
                                      <i class="el-icon-circle-plus"></i>新增
                                    </span>
                                  </span>
                                </header>
                                <section class="relationBox">
                                  <div class="behaviorLeft" v-if="_is.filter.conditions.length>1">
                                    <span class="relationLine"></span>
                                    <span
                                      class="relationBtn no_copy"
                                      v-if="!disabledJudge"
                                      @click="_is.filter.relation = _is.filter.relation=='and'?'or':'and'"
                                    >{{relationShowChange(_is.filter.relation)}}</span>
                                    <span
                                      class="relationBtn no_copy relationBtnNoHover"
                                      v-if="disabledJudge"
                                    >{{relationShowChange(_is.filter.relation)}}</span>
                                  </div>
                                  <div
                                    class="behaviorRight"
                                    :style="{
                                        marginLeft:_is.filter.conditions.length>1?'1.2rem':'0',
                                        width:_is.filter.conditions.length>1?'calc(100% - 1.2rem)':'100%'
                                      }"
                                  >
                                    <div
                                      class="behaviorLine relationItem"
                                      v-for="(_iss,_inss) in _is.filter.conditions"
                                      :key="_inss"
                                    >
                                      <conditionsItem
                                        @change="userBehaviorSet($event,_in,_ins,_inss)"
                                        :fieldList="_is.fieldList"
                                        fieldType='eventPropertyList'
                                        :eventId="_is.eventId"
                                        :disabled="disabledJudge"
                                        :item="_iss"
                                      ></conditionsItem>
                                      <span
                                        v-if="!disabledJudge"
                                        @click="userBehaviorOperation(-2,_in,_ins,_inss)"
                                        class="powerList"
                                      >
                                        <i class="el-icon-close del"></i>
                                      </span>
                                    </div>
                                  </div>
                                </section>
                                <footer v-show="!_is.doNot">
                                  <el-select
                                    v-model="_is.aggregator"
                                    @change="_is.field = _is.aggregator=='general'?('event.'+_is.eventId+'.times'):('event.'+_is.eventId+'._day')"
                                    :disabled="disabledJudge"
                                    class="el_lang"
                                    :style="{width:'2rem'}"
                                    :size="relationSize"
                                  >
                                    <el-option label="总次数" value="general"></el-option>
                                    <el-option label="分布" value="unique"></el-option>
                                  </el-select>
                                  <el-select
                                    @change="_is.restrict.params=_is.restrict.function=='between'?[0,1]:[0]"
                                    :style="{width:'1.6rem'}"
                                    v-model="_is.restrict.function"
                                    :disabled="disabledJudge"
                                    class="el_min"
                                    :size="relationSize"
                                  >
                                    <el-option label="等于" value="equal"></el-option>
                                    <el-option label="不等于" value="notEqual"></el-option>
                                    <el-option label="小于" value="less"></el-option>
                                    <el-option label="小于等于" value="most"></el-option>
                                    <el-option label="大于" value="greater"></el-option>
                                    <el-option label="大于等于" value="least"></el-option>
                                    <el-option label="区间" value="between"></el-option>
                                    <el-option label="TOP前" value="topn_most"></el-option>
                                    <el-option label="TOP后" value="topn_least"></el-option>
                                  </el-select>
                                  <template v-if="_is.restrict.function!='between'">
                                    <el-input-number
                                      :disabled="disabledJudge"
                                      v-model="_is.restrict.params[0]"
                                      size="small"
                                      class="el_mid"
                                      controls-position="right"
                                      :min="0"
                                    ></el-input-number>
                                  </template>
                                  <template v-else>
                                    <el-input-number
                                      :disabled="disabledJudge"
                                      v-model="_is.restrict.params[0]"
                                      size="small"
                                      class="el_mid"
                                      controls-position="right"
                                      :min="0"
                                    ></el-input-number>
                                    <span :style="{margin:'0 4px'}">至</span>
                                    <el-input-number
                                      :disabled="disabledJudge"
                                      v-model="_is.restrict.params[1]"
                                      size="small"
                                      class="el_mid"
                                      controls-position="right"
                                      :min="0"
                                    ></el-input-number>
                                  </template>
                                </footer>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
                <!-- 行为序列 -->
                <div class="propTypeList">
                  <header class="flex_btw">
                    <div>
                      <i
                        v-if="foldArr[2]"
                        @click="foldArr = [foldArr[0],foldArr[1],false]"
                        class="el-icon-minus"
                      ></i>
                      <i
                        v-else
                        @click="foldArr = [foldArr[0],foldArr[1],true]"
                        class="el-icon-plus"
                      ></i>
                      行为序列
                    </div>
                    <div @click="ruleContentListAdd(2)" v-if="!disabledJudge">
                      <i class="el-icon-circle-plus"></i>添加
                    </div>
                  </header>
                  <section :style="{height:foldArr[2]?'auto':'0'}">
                    <div class="relationBox userSequenceRuleBox">
                      <div
                        v-if="activeItem.ruleContentList[0].userSequenceRule.sequences.length>1"
                        class="relationLeft"
                      >
                        <span class="relationLine"></span>
                        <span
                          class="relationBtn no_copy"
                          v-if="!disabledJudge"
                          @click="activeItem.ruleContentList[0].userSequenceRule.relation=activeItem.ruleContentList[0].userSequenceRule.relation=='and'?'or':'and'"
                        >{{relationShowChange(activeItem.ruleContentList[0].userSequenceRule.relation)}}</span>
                        <span
                          class="relationBtn no_copy relationBtnNoHover"
                          v-else
                        >{{relationShowChange(activeItem.ruleContentList[0].userSequenceRule.relation)}}</span>
                      </div>
                      <div
                        class="relationRight"
                        :style="{
                          width:activeItem.ruleContentList[0].userSequenceRule.sequences.length>1?'calc(100% - 1rem)':'100%',
                          marginLeft:activeItem.ruleContentList[0].userSequenceRule.sequences.length>1?'1rem':'0'
                          }"
                      >
                        <div
                          class="relationItem userSequenceRuleItem"
                          v-for="(_i,_in) in activeItem.ruleContentList[0].userSequenceRule.sequences"
                          :key="_in"
                        >
                          <header>
                            <span class="indexNum">{{convert(_in+1)}}</span>
                            <el-date-picker
                              v-model="_i.timeRestrict.params"
                              class="el_lang"
                              :picker-options="pickerOptions"
                              :disabled="disabledJudge"
                              type="daterange"
                              :style="{width:'4rem'}"
                              format="yyyy 年 MM 月 dd 日"
                              value-format="yyyy-MM-dd"
                              :size="relationSize"
                            ></el-date-picker>
                            <i
                              v-if="!disabledJudge"
                              @click="userSequenceRuleOperation(1,_in)"
                              class="el-icon-close del"
                            ></i>
                          </header>
                          <section>
                            <div v-for="(_is,_ins) in _i.steps" :key="_ins">
                              <div class="stepHead">
                                <span class="stepNumber">{{convert(_in+1)}}{{_ins+1}}</span>
                                <el-select
                                  filterable
                                  v-model="_is.eventId"
                                  :disabled="disabledJudge"
                                  class="eventChoose"
                                  size="small"
                                  @change="_is.filter.conditions = [];_is.fieldList=[];fieldListChange('userSequenceRule',_in,_ins,_is.eventId)"
                                >
                                  <el-option
                                    v-for="itemEvent in eventList"
                                    :key="itemEvent.eventId"
                                    :label="itemEvent.eventName"
                                    :value="itemEvent.eventId"
                                  ></el-option>
                                </el-select>
                                <span
                                  class="addChoose"
                                  v-if="!disabledJudge"
                                  @click="_is.eventId?userSequenceRuleOperation(4,_in,_ins):null"
                                >
                                  <i class="el-icon-plus"></i>
                                  添加筛选
                                </span>
                                <span
                                  @click="userSequenceRuleOperation(3,_in,_ins)"
                                  v-if="_i.steps.length>2 && !disabledJudge"
                                  class="addChoose"
                                >
                                  <i class="el-icon-close del"></i>
                                  删除
                                </span>
                              </div>
                              <div class="relationBox">
                                <div class="behaviorLeft" v-if="_is.filter.conditions.length>1">
                                  <span class="relationLine"></span>
                                  <span
                                    class="relationBtn no_copy"
                                    v-if="!disabledJudge"
                                    @click="_is.filter.relation=_is.filter.relation=='and'?'or':'and'"
                                  >{{relationShowChange(_is.filter.relation)}}</span>
                                  <span
                                    class="relationBtn no_copy relationBtnNoHover"
                                    v-else
                                  >{{relationShowChange(_is.filter.relation)}}</span>
                                </div>
                                <div
                                  class="behaviorRight"
                                  :style="{
                                    marginLeft:_is.filter.conditions.length>1?'1.2rem':'0',
                                    width:_is.filter.conditions.length>1?'calc(100% - 1.2rem)':'100%'
                                  }"
                                >
                                  <div
                                    class="behaviorLine relationItem"
                                    v-for="(_iss,_inss) in _is.filter.conditions"
                                    :key="_iss.field+_inss"
                                  >
                                    <conditionsItem
                                      fieldType='eventPropertyList'
                                      @change="userSequenceSet($event,_in,_ins,_inss)"
                                      :eventId="_is.eventId"
                                      :fieldList="_is.fieldList"
                                      :disabled="disabledJudge"
                                      :item="_iss"
                                    ></conditionsItem>
                                    <span class="powerList">
                                      <i
                                        v-if="!disabledJudge"
                                        @click="userSequenceRuleOperation(6,_in,_ins,_inss)"
                                        class="el-icon-close del"
                                      ></i>
                                    </span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </section>
                          <footer>
                            <span v-if="!disabledJudge" @click="userSequenceRuleOperation(2,_in)">
                              <i class="el-icon-circle-plus-outline"></i>
                              添加事件
                            </span>
                          </footer>
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>
            </div>
            <!-- 底部预估和人数限制 -->
            <div class="btmPower btmPowertop">
              预估人数
              <el-tooltip class="item" effect="dark" :content="numEstimate" placement="top">
                <i class="el-icon-question element"></i>
              </el-tooltip>
            </div>
            <div class="btmPower">
              <el-select
                size="small"
                :disabled="disabledJudge||percentLoading?true:false"
                v-model="percent"
                class="element"
              >
                <el-option label="按全量计算" :value="100"></el-option>
                <el-option label="按 1 / 2 抽样计算" :value="50"></el-option>
                <el-option label="按 1 / 4 抽样计算" :value="25"></el-option>
                <el-option label="按 1 / 8 抽样计算" :value="12.5"></el-option>
                <el-option label="按 1 / 16 抽样计算" :value="6.25"></el-option>
                <el-option label="按 1 / 32 抽样计算" :value="3.12"></el-option>
                <el-option label="按 1 / 64 抽样计算" :value="1.56"></el-option>
              </el-select>
              <el-button
                @click="getPercent"
                size="small"
                :disabled="disabledJudge||percentLoading?true:false"
                type="primary"
              >预估</el-button>
              <span
                v-if="percentRes||percentRes===0"
                :style="{margin:'0 20px',fontWeight:400}"
              >{{percentRes}} 人</span>
            </div>
            <div class="btmPower">
              人数限制
              <el-checkbox
                :disabled="disabledJudge"
                @change="limiChange($event)"
                class="element"
                v-model="numLimit"
              >限制人群返回数量</el-checkbox>
            </div>
            <div class="btmPower" :style="{textIndent:'10px'}" v-show="numLimit">
              按
              <el-select
                size="small"
                :disabled="disabledJudge"
                @change="limiChange($event)"
                :style="{marginRight:'20px'}"
                v-model="prop_or_any"
                class="minelement"
              >
                <el-option label="随机" :value="true"></el-option>
                <el-option label="属性" :value="false"></el-option>
              </el-select>
              <el-select
                :disabled="disabledJudge"
                v-show="!prop_or_any"
                clearable
                filterable
                v-model="activeItem.sortInfo.sortProfile"
                size="small"
                class="medelement"
              >
                <el-option
                  v-for="_i in propertyList.userPropertyList"
                  :key="_i.propertyKey"
                  :value="_i.propertyKey"
                  :label="_i.propertyName"
                ></el-option>
              </el-select>
              <el-select
                :disabled="disabledJudge"
                v-show="!prop_or_any"
                v-model="activeItem.sortInfo.sortAsc"
                size="small"
                :style="{marginRight:'20px'}"
                class="medelement"
              >
                <el-option label="数值从小到大" :value="true"></el-option>
                <el-option label="数值从大到小" :value="false"></el-option>
              </el-select>返回
              <el-input-number
                :disabled="disabledJudge"
                v-model="activeItem.userLimit"
                size="small"
                class="element"
                controls-position="right"
                :min="0"
              ></el-input-number>
            </div>
          </template>
        </div>
        <div class="footerRules flex_btw">
          <el-button type="text" @click="rulesBoolChange('cloose')">取消</el-button>
          <div>
            <template v-if="step==1">
              <el-button :size="elSize" type="primary" @click="step=2">下一步</el-button>
            </template>
            <template v-if="step==2">
              <el-button :size="elSize" type="primary" plain @click="step=1">上一步</el-button>
              <el-button
                :size="elSize"
                type="primary"
                v-if="!activeItem.id"
                @click="rulesBoolChange('change')"
              >创 建</el-button>
              <el-button
                v-if="update&&activeItem.id&&!updateBool"
                :size="elSize"
                @click="updateBool=true"
                type="primary"
              >更 新</el-button>
              <el-button
                :size="elSize"
                type="primary"
                v-if="activeItem.id&&update&&updateBool"
                @click="rulesBoolChange('update')"
              >完 成</el-button>
            </template>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import conditionsItem from "./conditionsItem.vue";
export default {
  name: "createRules", // 规则搭建组件
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    update: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    disabledType:{
      type: Boolean,
      default: () => {
        return false;
      }
    }
  },
  data() {
    return {
      pickerOptions: {
        disabledDate: time => {
          let _now = Date.now();
          return time.getTime() > _now; //大于当前的禁止，小于7天前的禁止
        }
      },
      updateBool: false, // 判断是否开启更新功能
      fieldList: {
        eventPropertyList: [],
        userPropertyList: []
      }, // 第一列可选值
      eventList: [], // 请求到的全部事件
      foldArr: [true, true, true], // 用户 属性  行为   序列   折叠开关组
      propertyList: {
        eventPropertyList: [],
        userPropertyList: []
      },
      percent: 100, // 预估抽样比例
      percentRes: 0, // 抽样预测结果
      percentLoading: false,
      activeItem: {
        sortInfo: {
          sortProfile: null, // 属性
          sortAsc: true // 正序
        }, // 结算排序
        userLimit: 0, // 用户数量限制
        appId: null,
        name: null,
        cname: null,
        sourceType: 1, // 1:规则创建,2:结果保存
        isRoutine: 1, // 更新方式  1:例行  0:手动
        unit: "day", // 例行状态下，运算周期  day  month year
        comment: null, // 分组备注
        limit: 1000, // 用户最大数
        ruleContentList: [
          {
            relation: "and",
            userPropertyRule: {
              relation: "and",
              conditions: [],
              filters: []
            }, // 用户属性
            userBehaviorRule: {
              relation: "and",
              behaviors: []
            }, // 用户行为
            userSequenceRule: {
              relation: "and",
              sequences: []
            } // 行为序列
          }
        ] // 分群规则
      }, // 当前操作编辑的弹框对象
      numEstimate:
        "抽样计算为提升数据量过大时预估总人数的计算效率。 创建后按照全量用户进行计算",
      numLimit: false, // 是否限制人数返回数量
      prop_or_any: true, // 随机 或者 属性  人数限制
      relationSize: "small",
      ruleContentList: [
        {
          relation: "or",
          userPropertyRule: {
            relation: "and",
            conditions: [],
            filters: []
          }, // 用户属性
          userBehaviorRule: {
            relation: "and",
            behaviors: []
          }, // 用户行为
          userSequenceRule: {
            relation: "and",
            sequences: []
          } // 行为序列
        }
      ], // 总体的筛选条件
      step: 1, // 步骤条
      elSize: "small",
      rulesBool: false // 弹框是否显示
    };
  },
  watch: {
    item: {
      handler(newValue) {
        if (newValue && newValue.id) {
          this.activeItem = JSON.parse(JSON.stringify(newValue));
          this.activeItem.name = this.activeItem.name.split("_")[
            this.activeItem.name.split("_").length - 1
          ];
          this.activeItem.ruleContentList[0].userPropertyRule = this.filtersConditionsHandle(
            true,
            this.activeItem.ruleContentList[0].userPropertyRule
          );
          // 补充行为序列 做过没做过字段
          try{
            if(
            this.activeItem.ruleContentList[0]
            &&this.activeItem.ruleContentList[0].userBehaviorRule
            &&this.activeItem.ruleContentList[0].userBehaviorRule.behaviors
            ){
            this.activeItem.ruleContentList[0].userBehaviorRule.behaviors.map(_i=>{
              _i.measures.map(_is=>{
                if(_is.restrict&&_is.restrict.function=='equal'&&_is.restrict.params==[0]){
                  _is.doNot = true
                }else{
                  _is.doNot = false
                }
              })
            })
          }
          }catch(err){
            console.log('做过没做过：',err)
          }
          console.log(this.activeItem.ruleContentList[0],'补充')
          // 更改是否开启人数限制   随机限制人数还是属性限制人数
          this.numLimit = false;
          this.prop_or_any = true;
          if (newValue.userLimit) {
            this.numLimit = true;
          }
          if (newValue.sortInfo.sortProfile) {
            this.prop_or_any = false;
          }
        } else {
          this.numLimit = false;
          this.prop_or_any = true;
          this.activeItemInit();
        }
        this.foldArr = [true, true, true];
        this.rulesBoolChange("open");
      },
      deep: true
    },
    rulesBool: {
      handler(newValue) {
        console.log(newValue);
        this.updateBool = false;
        if (!newValue) {
          this.activeItemInit();
        }
      },
      deep: true
    }
  },
  methods: {
    userPropSet(v, index, indexSon, bool) {
      if (bool) {
        this.activeItem.ruleContentList[0].userPropertyRule.conditions[
          index
        ].conditions.splice(indexSon, 1, v);
      } else {
        this.activeItem.ruleContentList[0].userPropertyRule.conditions.splice(
          index,
          1,
          v
        );
      }
    }, // 用户属性赋值操作
    userBehaviorSet(value, index, indexSon, indexCon) {
      this.activeItem.ruleContentList[0].userBehaviorRule.behaviors[
        index
      ].measures[indexSon].filter.conditions[indexCon] = value;
    }, // 用户行为赋值操作
    userSequenceSet(value, index, indexSon, indexCon) {
      this.activeItem.ruleContentList[0].userSequenceRule.sequences[
        index
      ].steps[indexSon].filter.conditions[indexCon] = value;
    }, // 行为序列赋值操作
    async fieldListChange(jungle, index, indexSon, eventId) {
      // let _res = await this.$analysisApi.eventAnalysis.eventAnalysisPropertyList(
      //   {
      //     appId:this.appId,
      //     eventId }
      // );
      let _res = await this.$analysisApi.userAnalysis.userPropertyList({
        appId: this.appId,
        eventId
      });
      let arr = [];
      if (
        _res&&
        _res.success &&
        _res.value.eventPropertyList &&
        _res.value.eventPropertyList.length > 0
      ) {
        _res.value.eventPropertyList.map(_i => {
          // _i.propertyId = "event." + eventId + "." + _i.propertyId;
          _i.propertyId = _i.propertyKey;
        });
        arr = _res.value.eventPropertyList;
      }
      switch (jungle) {
        case "userBehaviorRule":
          this.activeItem.ruleContentList[0].userBehaviorRule.behaviors[
            index
          ].measures[indexSon].fieldList = arr;
          if (
            this.activeItem.ruleContentList[0].userBehaviorRule.behaviors[index]
              .measures[indexSon].aggregator == "general"
          ) {
            this.activeItem.ruleContentList[0].userBehaviorRule.behaviors[
              index
            ].measures[indexSon].field = "event." + eventId + ".times";
          } else {
            this.activeItem.ruleContentList[0].userBehaviorRule.behaviors[
              index
            ].measures[indexSon].field = "event." + eventId + "._day";
          }
          break;
        case "userSequenceRule":
          this.activeItem.ruleContentList[0].userSequenceRule.sequences[
            index
          ].steps[indexSon].fieldList = arr;
          break;
      }
    }, // field 字段更改 查询 parmas 可选值
    userPropOperation(bool, index, indexSon) {
      let obj = {};
      switch (bool) {
        case 1:
          this.activeItem.ruleContentList[0].userPropertyRule.conditions[
            index
          ].conditions.push({ field: null, function: null, params: [] });
          break;
        case 2:
          if (
            this.activeItem.ruleContentList[0].userPropertyRule.conditions
              .length == 1
          ) {
            this.activeItem.ruleContentList[0].userPropertyRule.conditions.push(
              {
                field: null,
                function: null,
                params: []
              }
            );
          } else {
            obj = JSON.parse(
              JSON.stringify(
                this.activeItem.ruleContentList[0].userPropertyRule.conditions[
                  index
                ]
              )
            );
            this.activeItem.ruleContentList[0].userPropertyRule.conditions.splice(
              index,
              1,
              {
                relation: "and",
                conditions: [obj, { field: null, function: null, params: [] }]
              }
            );
          }
          console.log(
            JSON.parse(
              JSON.stringify(
                this.activeItem.ruleContentList[0].userPropertyRule.conditions
              )
            ),
            "100"
          );
          break;
        case -1:
          if (
            this.activeItem.ruleContentList[0].userPropertyRule.conditions[
              index
            ].conditions.length == 2
          ) {
            this.activeItem.ruleContentList[0].userPropertyRule.conditions[
              index
            ].conditions.splice(indexSon, 1);
            this.activeItem.ruleContentList[0].userPropertyRule.conditions.splice(
              index,
              1,
              JSON.parse(
                JSON.stringify(
                  this.activeItem.ruleContentList[0].userPropertyRule
                    .conditions[index].conditions[0]
                )
              )
            );
          } else {
            this.activeItem.ruleContentList[0].userPropertyRule.conditions[
              index
            ].conditions.splice(indexSon, 1);
          }
          break;
        case -2:
          this.activeItem.ruleContentList[0].userPropertyRule.conditions.splice(
            index,
            1
          );
          break;
      }
    }, // 用户属性  新增  删除 点击   bool: 1-里层新增  2-外层新增  -1 - 里层删除   -2 - 外层删除
    userBehaviorOperation(bool, index, indexSon, indexCon) {
      let _arr = [];
      switch (bool) {
        case 1:
          if (
            this.activeItem.ruleContentList[0].userBehaviorRule.behaviors
              .length == 1
          ) {
            this.activeItem.ruleContentList[0].userBehaviorRule.behaviors.push({
              relation: "and",
              measures: [
                {
                  name: null,
                  eventId: this.eventList[0]
                    ? this.eventList[0].eventId
                    : "_AppStart",
                  aggregator: "general",
                  field: this.eventList[0]
                    ? "event." + this.eventList[0].eventId + ".times"
                    : "event._AppStart.times",
                  restrict: {
                    function: "least",
                    params: ["1"]
                  },
                  timeRestrict: {
                    function: "absolute_time",
                    params: []
                  },
                  filter: {
                    relation: "and",
                    conditions: []
                  }
                }
              ]
            });
          } else {
            this.activeItem.ruleContentList[0].userBehaviorRule.behaviors[
              index
            ].measures.push({
              name: null,
              eventId: this.eventList[0]
                ? this.eventList[0].eventId
                : "_AppStart",
              aggregator: "general",
              field: this.eventList[0]
                ? "event." + this.eventList[0].eventId + ".times"
                : "event._AppStart.times",
              restrict: {
                function: "least",
                params: ["1"]
              },
              timeRestrict: {
                function: "absolute_time",
                params: []
              },
              filter: {
                relation: "and",
                conditions: []
              }
            });
          }
          break;

        case 3:
          this.activeItem.ruleContentList[0].userBehaviorRule.behaviors[
            index
          ].measures[indexSon].filter.conditions.push({
            field: null,
            function: null,
            params: []
          });
          break;
        case -1:
          if (
            this.activeItem.ruleContentList[0].userBehaviorRule.behaviors[index]
              .measures.length == 1
          ) {
            this.activeItem.ruleContentList[0].userBehaviorRule.behaviors.splice(
              index,
              1
            );
            if (
              this.activeItem.ruleContentList[0].userBehaviorRule.behaviors
                .length == 1
            ) {
              this.activeItem.ruleContentList[0].userBehaviorRule.behaviors[0].measures.map(
                _i => {
                  _arr.push({
                    relation: "and",
                    measures: [JSON.parse(JSON.stringify(_i))]
                  });
                }
              );
              this.activeItem.ruleContentList[0].userBehaviorRule.behaviors = JSON.parse(
                JSON.stringify(_arr)
              );
            }
          } else {
            this.activeItem.ruleContentList[0].userBehaviorRule.behaviors[
              index
            ].measures.splice(indexSon, 1);
          }
          break;
        case -2:
          this.activeItem.ruleContentList[0].userBehaviorRule.behaviors[
            index
          ].measures[indexSon].filter.conditions.splice(indexCon, 1);
          break;
      }
    }, // 用户行为  新增  删除 点击    bool: 1-新增  -1 - 指标维度删除  -2 - conditions维度删除    3-里层添加筛选
    userSequenceRuleOperation(bool, index, indexSon, indexCon) {
      switch (bool) {
        case 1:
          this.activeItem.ruleContentList[0].userSequenceRule.sequences.splice(
            index,
            1
          );
          break;
        case 2:
          this.activeItem.ruleContentList[0].userSequenceRule.sequences[
            index
          ].steps.push({
            eventId: null,
            filter: {
              relation: "and",
              conditions: []
            }
          });
          break;
        case 3:
          this.activeItem.ruleContentList[0].userSequenceRule.sequences[
            index
          ].steps.splice(indexSon, 1);
          break;
        case 4:
          this.activeItem.ruleContentList[0].userSequenceRule.sequences[
            index
          ].steps[indexSon].filter.conditions.push({
            field: null,
            function: null,
            params: []
          });
          break;
        case 6:
          console.log(
            JSON.parse(
              JSON.stringify(
                this.activeItem.ruleContentList[0].userSequenceRule.sequences[
                  index
                ].steps[indexSon].filter.conditions
              )
            ),
            indexCon
          );
          this.activeItem.ruleContentList[0].userSequenceRule.sequences[
            index
          ].steps[indexSon].filter.conditions.splice(indexCon, 1);
          console.log(
            JSON.parse(
              JSON.stringify(
                this.activeItem.ruleContentList[0].userSequenceRule.sequences[
                  index
                ].steps[indexSon].filter.conditions
              )
            ),
            indexCon
          );
          break;
      }
    }, // 行为序列  操作  1-外层删除  2-外层步骤添加  3-步骤删除  4-步骤追加筛选   6-里层删除
    ruleContentListAdd(index) {
      this.foldArr[index] = true;
      switch (index) {
        case 0:
          this.activeItem.ruleContentList[0].userPropertyRule.conditions.push({
            field: null,
            function: null,
            params: []
          });
          break;
        case 1:
          this.activeItem.ruleContentList[0].userBehaviorRule.behaviors.push({
            relation: "and",
            measures: [
              {
                name: null,
                eventId: this.eventList[0]
                  ? this.eventList[0].eventId
                  : "_AppStart",
                aggregator: "general",
                field: this.eventList[0]
                  ? "event." + this.eventList[0].eventId + ".times"
                  : "event._AppStart.times",
                restrict: {
                  function: "least",
                  params: ["1"]
                },
                timeRestrict: {
                  function: "absolute_time",
                  params: []
                },
                filter: {
                  relation: "and",
                  conditions: []
                }
              }
            ]
          });
          break;
        case 2:
          this.activeItem.ruleContentList[0].userSequenceRule.sequences.push({
            timeRestrict: {
              function: "absolute_time",
              params: []
            },
            steps: [
              {
                eventId: null,
                filter: {
                  relation: "and",
                  conditions: []
                }
              },
              {
                eventId: null,
                filter: {
                  relation: "and",
                  conditions: []
                }
              }
            ]
          });
          break;
      }
    }, // 外层添加点击函数
    relationShowChange(relation) {
      let str = "且";
      if (relation == "or") {
        str = "或";
      }
      return str;
    },
    limiChange() {
      this.activeItem.sortInfo = {
        sortProfile: null, // 属性
        sortAsc: true // 正序
      };
      this.activeItem.userLimit = 0;
    }, // 人数限制开启关闭函数
    async getPropertyList() {
      let _res = await this.$analysisApi.userAnalysis.userPropertyList({
        appId: this.appId,
        productCode: this.appItem.productCode
      });
      if (_res&&_res.success) {
        this.propertyList = _res.value;
      }
    }, // 获取全部属性函数
    async eventListGet() {
      let _res = await this.$applicationApi.event_list({
        currentPage: 1,
        pageSize: 99999,
        productCode: this.appItem.productCode,
        appId: this.appId
      });
      if (_res&&_res.success) {
        this.eventList = _res.value.list;
      }
    }, // 获取全部事件函数
    async getPercent() {
      this.percentLoading = true;
      let obj = JSON.parse(JSON.stringify(this.activeItem));
      obj.isRoutine = 0;
      obj.percent = this.percent;
      obj.name = "user_group_" + obj.name;
      // obj.appId = '154058';
      let _res = await this.$analysisApi.userAnalysis.userGroupReportEstimate(
        obj
      );
      this.percentLoading = false;
      if (_res&&_res.success) {
        if (_res.value.list.length == 1) {
          this.percentRes = _res.value.list[0].partitionValues[0].userCount;
        }
      }
    }, // 分群预估函数
    convert(num) {
      return num <= 26
        ? String.fromCharCode(num + 64)
        : this.convert(~~((num - 1) / 26)) + this.convert(num % 26 || 26);
    },
    filtersConditionsHandle(bool, obj) {
      let _obj = JSON.parse(JSON.stringify(obj));
      let _arrFilters = [];
      let _arrConditions = [];
      let len = 0;
      if (obj.filters) {
        _arrFilters = JSON.parse(JSON.stringify([...obj.filters]));
      }
      if (obj.conditions) {
        _arrConditions = JSON.parse(JSON.stringify([...obj.conditions]));
        len = _arrConditions.length - 1;
      }
      if (bool) {
        _obj.conditions = [..._arrConditions, ..._arrFilters];
        _obj.filters = [];
      } else {
        for (let i = 0; i <= len; i++) {
          if (_arrConditions[i].relation) {
            _arrFilters.push(JSON.parse(JSON.stringify(_arrConditions[i])));
            _arrConditions.splice(i, 1);
            len--;
          }
        }
        _obj.conditions = _arrConditions;
        _obj.filters = _arrFilters;
      }
      return _obj;
    }, // filters conditions 两个字段处理
    rulesBoolChange(bool) {
      if (bool == "cloose") {
        this.rulesBool = false;
      }
      if (bool == "change" || bool == "update") {
        let obj = JSON.parse(JSON.stringify(this.activeItem));
        obj.ruleContentList[0].userPropertyRule = this.filtersConditionsHandle(
          false,
          obj.ruleContentList[0].userPropertyRule
        );
        obj.limit = obj.userLimit;
        obj.name = "user_group_" + obj.name;
        // 去除冗余字段 fieldList
        obj.ruleContentList[0].userBehaviorRule.behaviors.map(_i => {
          _i.measures.map(_is => {
            _is.fieldList = [];
          });
        });
        obj.ruleContentList[0].userSequenceRule.sequences.map(_i => {
          _i.steps.map(_is => {
            _is.fieldList = [];
          });
        });
        this.$emit(bool, obj);
        if(bool=='change'){
          this.rulesBool = false;
        }
        this.updateBool = false;
      }
      if (bool == "open") {
        this.rulesBool = true;
      }
      this.step = 1;
    }, // 打开弹框  关闭弹框  点击创建
    async activeItemInit() {
      let name = null;
      // 获取分群标识 name
      let _res = await this.$analysisApi.userAnalysis.userGroupSeqid({});
      if (_res&&_res.success) {
        name = _res.value.id;
      }
      this.activeItem = {
        appId: this.item.appId,
        name: name,
        cname: null,
        unit: "day",
        sortInfo: {
          sortProfile: null, // 属性
          sortAsc: true // 正序
        }, // 结算排序
        userLimit: 0, // 用户数量限制
        sourceType: 1, // 1:规则创建,2:结果保存
        isRoutine: 1, // 更新方式  1:例行  0:手动
        comment: null, // 分组备注
        limit: 0, // 用户最大数
        ruleContentList: [
          {
            relation: "and",
            userPropertyRule: {
              relation: "and",
              conditions: [],
              filters: []
            }, // 用户属性
            userBehaviorRule: {
              relation: "and",
              behaviors: []
            }, // 用户行为
            userSequenceRule: {
              relation: "and",
              sequences: []
            } // 行为序列
          }
        ] // 分群规则
      };
    }, // 规则操作初始化
    async fieldListGet() {
      let res = await this.$analysisApi.eventAnalysis.eventAnalysisPropertyList(
        { appId: this.appId, eventId: "" }
      );
      if (res&&res.success) {
        let obj = {};
        if (
          res.value.eventPropertyList &&
          res.value.eventPropertyList.length > 0
        ) {
          res.value.eventPropertyList.map(_i => {
            _i.propertyId = "event." + _i.propertyId;
          });
          obj.eventPropertyList = res.value.eventPropertyList;
        }
        if (
          res.value.userPropertyList &&
          res.value.userPropertyList.length > 0
        ) {
          res.value.userPropertyList.map(_i => {
            _i.propertyId = "user." + _i.propertyId;
          });
          obj.userPropertyList = res.value.userPropertyList;
        }
        this.fieldList = obj;
      }
    } // 获取第一列可选数组
  },
  created() {
    this.getPropertyList(); // 获取全部属性接口
    this.eventListGet(); // 获取全部事件接口
    if (this.item && this.item.id) {
      this.activeItem = JSON.parse(JSON.stringify(this.item));
      this.activeItem.name = this.activeItem.name.split("_")[
        this.activeItem.name.split("_").length - 1
      ];
      if (this.activeItem.userLimit) {
        this.numLimit = true;
      }
      if (this.activeItem.sortInfo.sortProfile) {
        this.prop_or_any = false;
      }
      this.activeItem.ruleContentList[0].userPropertyRule = this.filtersConditionsHandle(
        true,
        this.activeItem.ruleContentList[0].userPropertyRule
      ); // 更改渲染格式
    } else {
      this.activeItemInit();
    }
    // 获取  filed  可选值数组
    this.fieldListGet();
  },
  components: { conditionsItem },
  computed: {
    appId() {
      return this.$store.state.global.appId;
    },
    appItem() {
      return this.$store.state.global.appItem;
    },
    disabledJudge() {
      if (this.updateBool) {
        return !this.updateBool;
      }
      return this.activeItem.id ? true : false;
    } // 判断是否可编辑
  }
};
</script>
<style scoped lang="scss">
.relationBtnNoHover {
  background: #f5f7fa !important;
  color: #c0c4cc !important;
  border: none !important;
}
.relationBtnNoHover:hover {
  background: #f5f7fa !important;
  color: #c0c4cc !important;
  border: none !important;
}
.behaviorBox:hover {
  background: rgba(64, 158, 255, 0.1);
}
.addChoose {
  margin: 0 10px 0 0;
}
.propTypeList {
  width: 100%;
  padding: 0px 13px;
  border: 1px solid #e0e6ed;
  margin: 14px auto;
  header {
    height: 40px;
    cursor: pointer;
    div:nth-child(1) {
      font-size: 14px;
      font-weight: 600;
      color: #1f2d3d;
      .btnLft {
        border: 2px solid #dcdfe6;
        width: 10px;
        height: 10px;
        text-align: center;
        line-height: 10px;
      }
    }
    div:nth-child(2) {
      color: #99a9bf;
      user-select: none;
      font-size: 14px;
      font-weight: 500;
      color: #475669;
    }
    i {
      margin: 0 4px;
    }
    .el-icon-plus,
    .el-icon-close,
    .el-icon-minus {
      font-size: 0.2rem;
      font-weight: 600;
      color: #909399;
    }
    .el-icon-circle-plus,
    .el-icon-error {
      color: #00bf8a;
      font-size: 0.26rem;
    }
  }
  section {
    overflow: hidden;
  }
}
// 基本信息表单
.basicInformation {
  width: 90%;
  margin: 0.4rem auto 0;
  .el-input,
  .el-select {
    width: 6rem;
  }
  .numberSelect {
    width: 2rem;
    margin: 0 0.1rem;
  }
}
* {
  box-sizing: border-box;
}
.drawerBox {
  .title {
    height: 30px;
    border-radius: 0;
    font-size: 0.26rem;
    display: flex;
    align-items: center;
    padding: 0;
  }
  .cont {
    width: 100%;
    height: 100%;
    position: relative;
    .sectionRules::-webkit-scrollbar {
      height: 0 !important;
      width: 0px !important;
    }
    .sectionRules {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 50px;
      width: 100%;
      height: calc(100% - 51px);
      overflow-y: scroll;
      padding-bottom: 40px;
      .step {
        width: 90%;
        height: 80px;
        display: flex;
        align-items: flex-end;
        margin: 0 auto;
        cursor: pointer;
      }
      .btmPower {
        display: flex;
        align-items: center;
        height: 0.7rem;
        width: 94%;
        margin: 0 auto;
        font-weight: 500;
        font-size: 16px;
        color: #1f2d3d;
        .element {
          margin: 0 10px;
        }
        .minelement {
          width: 1.4rem;
          margin: 0 10px;
        }
        .medelement {
          width: 3rem;
          margin-right: 10px;
        }
      }
      .btmPowertop {
        margin-top: 50px;
      }
    }
    .footerRules {
      height: 50px;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 0 40px;
      border-top: 1px solid #e8eaec;
    }
  }
}
</style>
